<template>
    <!-- 使用element-ui的布局模板，进行页面布局 -->
    <el-container class="AppInfoData">
        <!-- 顶部header部分 -->
        <el-header>
            <!-- 左侧标题模块 -->
            <div class="titles" @click="goHome()">管理后台</div>
            <!-- 顶栏菜单 -->
            <div>
                <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#409EFF"
                    text-color="white">
                    <el-submenu index="2">
                        <template slot="title">欢迎 {{name}} 登陆汇速递管理后台</template>
                        <el-menu-item @click="about()">关于我们</el-menu-item>
                        <el-menu-item index="/admin/home/passwd">修改密码</el-menu-item>
                        <el-menu-item @click="logout()">退出登录</el-menu-item>
                    </el-submenu>
                </el-menu>
            </div>
        </el-header>
        <!-- 底部内容部分 -->
        <el-container>
            <!-- 左侧菜单部分,设置宽度200px -->
            <el-aside width="200px">
                <!-- 左侧菜单栏目 -->
                <el-menu
                    :default-openeds="DefaultOpeneds"
                    :default-active="this.$route.path"
                    :router="true"
                    background-color="#354158"
                    text-color="white"
                    :style="{height:(windowHeight-60)+'px'}">
                    <!-- 左侧菜单配置 -->
                    <el-submenu :index="index + ''" :key="index" v-for="(item,index) in menu_config.menu_left">
                        <template slot="title"><i :class="item.icon"></i>{{ item.name }}</template>
                        <el-menu-item-group v-if="item.child">
                            <el-menu-item v-for="(value,key) in item.child"  v-has="key" :key="key" :index="key + ''">{{ value }}</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <!-- 右侧内容部分,设置剩余宽度 -->
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
        <!-- 设置底部版权部分 -->
        <!-- <el-footer>Footer</el-footer> -->
    </el-container>
</template>

<script>
export default {
    data() {
        var menu_config = require("@/config/menu").default
        return {
            menu_config:menu_config,
            windowHeight: document.documentElement.clientHeight,
            DefaultOpeneds:['0'],
            name:localStorage.getItem('express_admin_name')
        }
    },
    methods: {
        goHome() {
            if (this.$route.path != '/admin/home/index') {
                this.$router.push({ path: "/admin/home/index" })
            }
        },
        handleSelect(res) {
            if (this.$route.path != res) {
                this.$router.push({ path: res })
            }
        },
        logout() {
            localStorage.removeItem('express_admin_token')
            localStorage.removeItem('express_admin_id')
            localStorage.removeItem('express_admin_name')
            this.$router.push({ path: "/admin/login" })
        },
        // 关于我们
        about(){
            const h = this.$createElement;
            var infos = [
                h('span', null, '后端页面版本 '),
                h('i', { style: 'color: teal' }, 'v 1.0.0'),
            ]
            // 域名请求配置：
            var maps_url = require("@/config/init").default.domains
            for(var i in maps_url){
                infos.push(
                    h('br'),
                    h('span', null, i + ' 端接口域名 '),
                    h('i', { style: 'color: teal' }, maps_url[i]),
                )
            }
            this.$msgbox({
                title: '关于我们',
                message: h('p', null, infos),
                showConfirmButton:false
            })
        }
    },
    mounted(){
        // <!--把window.onresize事件挂在到mounted函数上-->
        var that = this;
        window.onresize = () => {
            return (() => {
            window.fullHeight = document.documentElement.clientHeight;
            that.windowHeight = window.fullHeight;  // 高
            })()
        };
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.AppInfoData{
    background: url(/static/background/login.png) repeat-y 0 0;
    background-size: 100%;
}
.el-header {
    background-color: #409EFF;
    color: #333;
    text-align: center;
    line-height: 60px;
    padding: 0;
    display: flex;
}

.el-aside {
    text-align: center;
    line-height: 200px;
}

.el-main {
    color: #333;
}

body>.el-container {
    margin-bottom: 40px;
}

.titles {
    width: 200px;
    color: #fff;
    background-color: #0086E8;
    font-weight: bold;
}

.titles-desc {
    display: flex;
}

.title-icon {
    color: #fff;
    width: 100px;
    line-height: 60px;
    text-align: center;
    display: block;
}

.el-menu-demo {
    position: absolute;
    right: 0px;
    top: 0px;
    background: #409EFF;
    color: #fff;
}
</style>
